<template>
    <div>
        <list class="scroller" v-if="bookListTemp" :style="{height:listHeight + 'px'}" @loadmore="onLoading"
              @onloadmore="onLoading" loadmoreoffset="250">
            <cell>
                <div :ref="refName"></div>
            </cell>
            <cell class="book-wrap row" v-for="(item,index) in bookListTemp" @click="goToBook(item._id)" v-if="item">
                <book-item :item="item" :index="index"></book-item>
            </cell>
        </list>
    </div>
</template>

<script>
    const modal = weex.requireModule('modal');
    import BookItem from '../book/BookItem'
    const dom = weex.requireModule('dom');
    export default {
        name: "book-list",
        components:{BookItem},
        props: {
            bookList: {
                type: [Array, Object]
            },
            listHeight: {
                type: Number,
                default: 1344
            },
            refName: {
                type: String,
                default: 'refName',
            },
            isGoTop: {
                type: Boolean,
                default: true,
            }
        },
        data() {
            return {

            }
        },
        watch: {
            //当为点击目录进入阅读界面时，滚动条回到顶部
            isGoTop: function () {
                let el;
                el = this.$refs[this.refName];
                console.log('isGoTop', el);
                dom.scrollToElement(el, {offset: 0});
            }
        },
        computed: {
            bookListTemp: {

                set: function (value) {
                    this.bookList = value;
                },
                get: function () {
                    return this.bookList;
                }

            }

        },
        methods: {
            goToBook(_id) {
                console.log(_id);
                this.$router.push({'name': 'bookInfo', query: {bookId: _id}});
            },
            onLoading(event) {
                this.$emit('onLoading', event);
            },
            setImgSrc(img) {
                return img;
            },
        },
    }
</script>

<style scoped>

    .row {
        flex-direction: row;
    }

    .book-wrap {
        padding: 20px;
        font-size: 12px;
        border-bottom-width: 1px;
        border-bottom-color: rgba(0,0,0,.05);
    }

    /* 加载更多 */
    .loading {
        width: 750px;
        display: -ms-flex;
        display: -webkit-flex;
        display: flex;
        -ms-flex-align: center;
        -webkit-align-items: center;
        -webkit-box-align: center;
        align-items: center;
    }

</style>